<template>
  <div id="index">
    <div class="contentBox">
      <div class="header">
        <div class="logoBox">
          <img class="logoImage" src="@/assets/image/indexImage/logo.png" />
          <span class="title">MarsCoin</span>
        </div>

        <div class="langdiv" type="text" @click="localeChange">
          <img class="image" referrerpolicy="no-referrer"
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps25m4lyyajg3rgvlwi9tg6otya7ntkz58822b92a7-2abb-47b6-86ec-9137775ab7c0" />
        </div>
      </div>

      <div class="content">
        <home ref="home" @swipeIndex="swipeIndex" />
      </div>
    </div>

    <div v-show="menuBarshow" class="menuBarbox">
      <menuBar @menuBarfun="menuBarfun" />
    </div>
  </div>
</template>

<script>
import SlideTransition from "@/views/components/SlideTransition.vue";
import menuBar from "@/views/components/menuBar.vue";
import Home from "./indexViews/home.vue";
export default {
  name: "index",
  components: {
    menuBar,
    SlideTransition,
    Home
  },
  data() {
    return {
      menuBarshow: false,
    };
  },


  mounted() {
    document.addEventListener("visibilitychange", () => {
      if (document.visibilityState == "hidden") {
        console.log("离开");
      } else {
        console.log("回来");
        console.log(this.bagIndex);

        if (this.bagIndex == 1) {
          this.$bus.$emit('setIsStop')
        }
      }
    });
  },
  methods: {
    menuBarfun(res) {
      this.menuBarshow = res.showList;
      this.bagIndex = res.index;
      this.$refs.home.indexFun(res.index);
      console.log(this.menuBarshow, "this.menuBarshow");
    },
    swipeIndex(index) {
      console.log(index, "index");
      console.log(this.$bus);
      this.bagIndex = index;
      if (index == 1) {
        this.$bus.$emit('setIsStop')
      }
    },
    localeChange() {
      this.menuBarshow = !this.menuBarshow;
    },
  },
};
</script>

<style lang="scss" scoped>
#index {
  font-family: SourceHanSansCN-Bold;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #ffffff;
  position: relative;
}

.menuBarbox {
  width: 100%;
  height: 100%;
  background: url("@/assets/image/indexBgImage/indexBgImage_menuBar.png") no-repeat;
  background-size: 100% 100%;
  z-index: 98;
  position: absolute;
  top: 0;
}

.contentBox {
  width: 100%;
  height: 100%;
}

.header {
  width: 100%;
  padding: 45px 32px 38px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  background: rgba($color: #000000, $alpha: 0.2);
  z-index: 99;

  .logoBox {
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;

    .logoImage {
      height: 42px;
    }

    .title {
      display: block;
      margin-left: 20px;
      //font-family: Arial;
      font-weight: bold;
      font-size: 40px;
      line-height: 30px;
    }
  }

  .langdiv {
    font-weight: bold;
    font-size: 16px;
    color: #ffffff !important;
    display: flex;

    .image {
      width: 35px;
    }
  }
}

.content {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
</style>